<template>
  <div style="background-color: #fff">
    <div style="font-size: 24px;line-height: 32px;
    font-weight: bold;text-align: center;
    padding-top: 20px;font-size: 20px;">{{group.title}}</div>
    <div style="width: 100%;margin-top: 10px;">
      <div style="width: 90%;min-height: 20px;margin: 0 auto;color: gray;">{{group.preface}}</div>
    </div>
    <!-- 信息录入 -->
    <van-cell-group
      label-align="right"
      v-for="(item, index) in problist"
      :key="index"
    >
      <van-row v-if="item.type == 3" style="width: 100%">
        <p style="width: 90%; margin: 10px auto; padding-top: 10px">
          <b>{{ item.name }}</b>
        </p>
        <!-- {{ index }}
        {{ item.answer }} -->
        <van-col style="width: 90%; margin: 10px auto">
          <van-field
            :placeholder="item.choice"
            v-model="item.answer"
            label-align="center"
          >
          </van-field>
        </van-col>
      </van-row>
      <van-radio-group
        v-model="item.answer"
        @change="change"
        v-if="item.type == 1"
      >
        <p style="width: 90%; margin: 10px auto; padding-top: 10px">
          <b>{{ item.name }}</b>
        </p>
        <van-row style="width: 91%; margin: auto">
          <van-col>
            <van-cell v-for="(elemt, index) in item.choice" :key="index">
              <van-radio :name="elemt">{{ elemt }}</van-radio>
            </van-cell>
          </van-col>
        </van-row>
      </van-radio-group>

      <van-checkbox-group
        v-model="item.answer"
        @change="cehckbox"
        v-if="item.type == 2"
      >
        <van-row>
          <p style="width: 90%; margin: 10px auto; padding-top: 10px">
            <b>{{ item.name }}</b>
          </p>
          <van-col style="width: 90%; margin: 10px auto">
            <van-cell v-for="(emt, index) in item.choice" :key="index">
              <van-checkbox :name="emt" shape="square">{{ emt }}</van-checkbox>
            </van-cell>
          </van-col>
        </van-row>
      </van-checkbox-group>
      <ul v-if="item.type == 4" style="padding-bottom: 5px">
        <li>
          <p style="width: 90%; margin: 10px auto; padding-top: 10px">
            <b>{{ item.name == '' ? '选择时间' : item.name }}</b>
          </p>
          <p
            style="width: 90%; margin: 10px auto; padding-top: 10px"
            @click="showTime(item.answer, index)"
          >
            {{ item.answer == '' ? '请选择时间' : item.answer }}
          </p>
        </li>
      </ul>

      <van-row v-if="item.type == 5">
        <p style="width: 90%; margin: 10px auto; padding-top: 10px">
          <b>{{ item.name }}</b>
        </p>
        <van-col style="width: 90%; margin: 10px auto">
          <van-uploader
            :max-count="1"
            v-model="item.answer"
            upload-text="请上传图片"
            style=""
            v-show="show_upload"
            :before-read="beforeRead"
            :after-read="afterRead"
            :before-delete="beforeDelete"
          />
        </van-col>
      </van-row>
      <van-row v-if="item.type == 6" style="width: 100%">
        <p style="width: 90%; margin: 10px auto; padding-top: 10px">
          <b>{{ item.name }}</b>
        </p>
        <!-- {{ index }}
        {{ item.answer }} -->
        <van-col style="width: 90%; margin: 10px auto">
          <van-field
            :placeholder="item.choice"
            v-model="item.answer"
            rows="2"
            autosize
            type="textarea"
            maxlength="500"
            show-word-limit
          >
          </van-field>
        </van-col>
      </van-row>
    </van-cell-group>
    <van-popup v-model="showtime" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        @confirm="timeConfirm"
        type="date"
      />
    </van-popup>
    <div style="padding: 0 16px; margin-top: 15px">
      <van-button
        style="width: 100%; font-size: 18px; color: white; background: #ffaa25"
        @click="upcard()"
        >确认提交</van-button
      >
    </div>
  </div>
</template>
<script>
import {
  Row,
  Col,
  Field,
  Toast,
  Picker,
  RadioGroup,
  Radio,
  Checkbox,
  Popup,
  Uploader,
  DatetimePicker,
  CheckboxGroup,
} from 'vant';
import { paper, subaper, storageUpload, authInfo } from '@/api/api';
import { getLocalStorage, setLOcalStorage } from '@/utils/local-storage';
import lrz from 'lrz';
export default {
  name: 'investigation',
  data() {
    return {
      title: '',
      userId: '',
      titxt: '',
      group:null,
      radio: '1',
      result: [],
      problist: '',
      show_upload: true,
      start_date: '',
      shoptext: '',
      CardBefore: '',
      multiple: '',
      showtime: false,
      fileList: [],
      single: '',
      images: [],
      questionnaireMemberList: [],
      currentDate: '',
      saleame: '',
      owname: '',
      directorId: '',
      indexTime: 0
    };
  },
  created() {
    authInfo().then((res) => {
      this.saleame = res.data.data.afterSale.name;
      this.owname = res.data.data.name;
      this.userId = res.data.data.userId;
      this.directorId = res.data.data.directorId;
      // if (status == 0) {
      //   //未认证
      //   Toast('请先验证手机号!');
      //   this.$router.push(`/check`);
      // } else {
      //   //已认证
      //   setLocalStorage({
      //     userId: this.userId,
      //     mobile: this.mobile,
      //   });
      // }
    });
    this.init();
  },
  methods: {
    showTime(val, index) {
      if (val != '') {
        this.currentDate = new Date(val);
      }
      this.indexTime = index;
      this.showtime = true;
      return;
    },

    timeConfirm(value) {
      this.problist[this.indexTime].answer = this.timeFormat(value);
      this.showtime = false;
    },
    timeFormat(time) {
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }

      return year + '-' + month + '-' + day;
    },
    init() {
      paper({ id: this.$route.params.id }).then((res) => {
        let quse = res.data.data.memberplus;
        this.titxt = res.data.data.Group.title;
        this.group=res.data.data.Group;
        quse.forEach((e) => {
          e.choiceTeel = e.choice;
          if (e.type == 1 || e.type == 2) {
            e.choice = e.choice.split(',');
          }
          if (e.type == 2 || e.type == 5) {
            e.answer = [];
          } else {
            e.answer = '';
          }
        });
        this.problist = quse;
      });
    },
    upcard() {
      let flag = false;
      this.problist.forEach((item) => {
        if (item.requiredState && item.answer == '') {
          Toast('请输入' + item.name);
          flag = true;
        }
      });
      if (flag) {
        return;
      }
      this.questionnaireMemberList = this.problist.map((e) => {
        return {
          addTime: e.addTime,
          answer: e.type == 5?e.answer.length>=1?e.answer[0].url:null:e.type == 2 ? e.answer.toString() : e.answer,
          choice: e.choiceTeel,
          descOrder: e.descOrder,
          groupId: e.groupId,
          id: e.id,
          name: e.name,
          type: e.type,
        };
      });
      let submitData = {};
      submitData.questionnaireMemberList = this.questionnaireMemberList;
      submitData.title = this.titxt;
      submitData.serverId = this.directorId == '' ? 1104 : this.directorId;
      submitData.userId = this.userId;
      submitData.serverName = this.saleame;
      submitData.userName = this.owname;
      submitData.groupId = this.$route.params.id;


      subaper(submitData)
        .then((res) => {
          Toast('提交成功，感谢反馈！');
          this.$router.go(-1);
        })
        .catch((err) => {
          Toast(err.data.data.errmsg);
        });
    },
    change(name) {
      //this.single = name;
    },
    cehckbox(names) {
      //this.multiple = names.toString();
    },
    beforeRead(file) {
      //上传之前校验
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        Toast('只允许上传jpg/png格式的图片！');
        return false;
      }
      if (file.size >= 5242880) {
        Toast('只允许上传小于5MB的图片！');
        return false;
      }
      return true;
    },
    async afterRead(file, detail) {
      //文件读取完成后的回调函数
      let that = this;
      if (file.size < 1048576) {
        //图片小于1MB不压缩
        //成功时执行
        const formData = new FormData();
        formData.append('file', file.file);
        storageUpload(formData)
          .then((res) => {
            that.images.push(res.data.data.url);
            that.CardBefore = res.data.data.url;
            file.url=res.data.data.url;
            // console.log(that.problist,666)
          })
          .catch(() => {});
      } else {
        lrz(file.file, {
          //width : 300
          quality: 0.7, //自定义使用压缩方式
        })
          .then(function (rst) {
            //成功时执行
            storageUpload(rst.formData)
              .then((res) => {
                that.images.push(res.data.data.url);
                that.CardBefore = res.data.data.url;
                file.url=res.data.data.url
              })
              .catch(() => {});
          })
          .catch(function (error) {
            //失败时执行
          })
          .always(function () {
            //不管成功或失败，都会执行
          });
      }
    },
    beforeDelete(file, detail) {
      this.images.splice(detail.index, 1);
      this.CardBefore = '';
      return true;
    },
  },
  components: {
    [Row.name]: Row,
    [Popup.name]: Popup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Col.name]: Col,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Field.name]: Field,
    [DatetimePicker.name]: DatetimePicker,
    [Toast.name]: Toast,
    [Uploader.name]: Uploader,
    [Picker.name]: Picker,
  },
};
</script>
<style lang="scss" scoped>
/deep/.van-col {
  float: none;
}
/deep/.van-cell {
  padding-left: 0;
}
/deep/.van-radio__label {
  margin-left: 8px;
}
</style>
